<div class="layui-fluid nepadmin-pad0 nepadmin-mar0 list0 supplierlist" id="list" lay-title="供货商管理">
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-md12">
                <div class="layui-card hxr-layui-card" id="supplierlistv">
                    <div class="layui-form hxradmin-card-header">
                        <div class="layui-form-item">
                            <div class="layui-inline">
                                <label class="layui-form-label">用户名</label>
                                <div class="layui-input-inline">
                                    <input type="text" name="user" placeholder="请输入用户名或真实姓名" autocomplete="off"
                                           class="layui-input">
                                </div>
                            </div>
                            <div class="layui-inline">
                                <label class="layui-form-label">状态</label>
                                <div class="layui-input-inline">
                                    <div class="layui-unselect layui-form-select">
                                        <div class="layui-select-title"><input name="status" type="text"
                                                                               placeholder="请选择状态" value="" readonly
                                                                               class="layui-input layui-unselect"><i
                                                class="layui-edge"></i></div>
                                        <dl class="layui-anim layui-anim-upbit" style="">
                                            <dd lay-value="" class="layui-select-tips layui-this">请选择状态</dd>
                                            <dd data='1'>启动</dd>
                                            <dd data='2'>停用</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="layui-inline">
                                <button class="layui-btn" data-type="reload" id="search">搜索</button>
                            </div>
                        </div>
                    </div>
                    <div class="layui-card-body">
                        <div>
                            <button class="layui-btn layuiadmin-btn-list" data-type="batchdel">删除</button>
                            <button class="layui-btn layuiadmin-btn-list" data-type="add">添加</button>
                        </div>
                        <table class="layui-hide" id="list-table" lay-filter="list-table"></table>
                        <div id="list-toolbar" style="display: none;">
                            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                                    class="layui-icon layui-icon-edit"></i>编辑</a>
                            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                                    class="layui-icon layui-icon-delete"></i>删除</a>
                            <button class="layui-btn layui-btn-normal layui-btn-xs" lay-event="list"><i class="layui-icon-list"></i>详情</button>
                        </div>
                    </div>
                </div>
                <script type="text/html" id="list-tableF">
                    <input type="checkbox" name="status" lay-skin="switch" lay-text="启用|停用" lay-filter="list-tableF"
                           value="{{ d.status }}" data-json="{{ encodeURIComponent(JSON.stringify(d)) }}" {{ d.status==
                           1 ? 'checked' : '' }}>

                </script>
                <script type="text/html" id="sex">
                    {{#  if(d.sex === 1){ }}
                    男
                    {{#  } else if(d.sex === 2) { }}
                    女
                    {{#  } else if(d.sex === 0) { }}
                    保密
                    {{#  } }}
                </script>
                <script type="text/html" id="card_photo">
                    <img style="max-height: 100%;" src="{{layui.conf.url+d.card_photo}}" onclick="previewImg(this)">
                </script>
                <!-- <a href="{{layui.conf.url+d.card_photo}}" target="_blank"></a> -->


                <script type="text/html" id="card_id">
                    【{{d.card_id}}】
                </script>

                <script type="text/html" id="institute_name">

                    {{#  layui.each(d.institute_name, function(index, item){ }}

                    <span style="color: #ff4911">【</span> {{item}} <span style="color: #ff4911">】</span>

                    {{#  }); }}
                    {{#  if(d.institute_name.length === 0){ }}
                    无数据
                    {{#  } }}
                </script>
                <!--
                {{# $.each(d.institute_name,function(index,value){ }}
   2312313
{{# }); }} -->
            </div>
        </div>
    </div>
</div>
<script>
    var userlist = new Vue({
        el: '#supplierlistv',
        data: {
            group: ''
        },
        methods: {
            groupF() {
                if (!this.group) {
                    var _this = this;
                    layui.admin.ajax('supplier/list', {}, 1).then(function (res) {
                        _this.group = res.data.list;
                    });
                }
            }
        }
    });
    var formurl = 'supplier/supplierform', formarea = ['600px', '600px'];

    //表格数据渲染
    layui.use(['table', 'form', 'laydate'], function () {
        var table = layui.table,
            form = layui.form,
            $ = layui.$,laydate=layui.laydate;
        //日期范围
        laydate.render({
            elem: '#date'
            , type: 'datetime'
            , range: true
        });
        layui.admin.initlist(table, 'supplier/list', 275, [
            [{
                type: 'checkbox',
                fixed: 'left'
            }, {
                field: 'supplier_id',
                title: 'ID',
                width: 100
            }, {
                field: 'supplier_name',
                title: '供货商用户名',
                minWidth: 150
            }, {
                field: 'real_name',
                title: '姓名',
                minWidth: 100
            }, {
                field: 'sex',
                title: '性别',
                width: 70,
                templet: '#sex'
            }, {
                field: 'total_income',
                title: '总入账金额(元)',
                width: 130
            }, {
                field: 'blance',
                title: '余额(元)',
                width: 100
            }, {
                field: 'school_name',
                title: '负责学校',
                width: 150
            }, {
                field: 'tel',
                title: '电话',
                width: 150
            }, {
                field: 'email',
                title: '邮箱',
                width: 150
            }, {
                field: 'card_photo',
                title: '身份证照片',
                width: 100,
                templet: '#card_photo'
            }, {
                field: 'card_id',
                title: '身份证号码',
                width: 200,
                templet: '#card_id'
            }, {
                field: 'address',
                title: '住址',
                width: 150
            }, {
                field: 'create_time',
                title: '创建时间',
                width: 200
            }, {
                field: 'status',
                title: '启用/停用',
                width: 100,
                templet: '#list-tableF',
                fixed: 'right'
            }, {
                title: '操作',
                toolbar: '#list-toolbar',
                width: 280,
                fixed: 'right'
            }]
        ]);

        //监听表格表单操作
        form.on('switch(list-tableF)', function (obj) {
            var json = JSON.parse(decodeURIComponent($(this).data('json')));
            json = table.clearCacheKey(json);
            layui.admin.ajax('supplier/update', {
                status: json.status == 1 ? 2 : 1,
                supplier_id: json.supplier_id
            }).then(function (res) {
                layui.admin.ahint(res.code, res.msg);
                layui.table.reload('list-table');
            }).catch(function (res) {
            });
        });

        //监听表格操作事件
        table.on('tool(list-table)', function (obj) {
            var data = obj.data;
            //删除
            if (obj.event === 'del') {
                layer.confirm('确定删除' + data.supplier_name + '?', function (index) {
                    layui.admin.delF(table, 'suppliers/delete', {supplier_id: data.supplier_id});
                });
            } else if (obj.event === 'edit') { //编辑
                if (data.institute_name){
                    data.institute_name=data.institute_name.join(',');
                }
                layui.admin.pupF('编辑供货商', formarea, formurl, 2, data)
            }else if(obj.event==='list'){
                layui.admin.supplier=data;
                layui.admin.pupF('供货商详情', ['1000px','600px'], 'supplier/supplier_detail.html?v='+Math.random(),2,data);
            }
        });
        var active = {
            batchdel: function () {
                layui.admin.delsF(table, 'suppliers/delete', 'supplier_id');
            }
            ,
            add: function (othis) {
                console.log(123123)
                layui.admin.pupF('添加供货商', formarea, formurl, 1, {})
            }
        };
        //操作dom
        $('.layui-btn.layuiadmin-btn-list').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        //搜索
        $('#search').on('click', function () {
            var obj = $(this).parents('.layui-form-item');
            var val1 = obj.find('input[name="user"]').val();
            layui.admin.reloads({
                supplier_name: val1
            });
        });
    });

    function previewImg(obj) {
        var img = new Image();
        img.src = obj.src;
        //var height = img.height + 50; // 原图片大小
        //var width = img.width; //原图片大小
        var imgHtml = "<img src='" + obj.src + "' width='auto' height='auto'/>";
        var width = 'auto';
        var height = 'auto';

        //弹出层
        layer.open({
            type: 1,
            shade: 0.8,
            offset: 'auto',
            area: [width, height],  // area: [width + 'px',height+'px']  //原图显示
            shadeClose: true,
            scrollbar: false,
            title: "图片预览", //不显示标题
            content: imgHtml, //捕获的元素，注意：最好该指定的元素要存放在body最外层，否则可能被其它的相对元素所影响
            cancel: function () {
                //layer.msg('捕获就是从页面已经存在的元素上，包裹layer的结构', { time: 5000, icon: 6 });
            }
        });
    }
</script>
